import React, { Component } from 'react'
import { Card, Table, Button, Icon, message, Modal } from 'antd'
import LinkButton from '../../components/linkButton'
import { reqCategories, reqUpdateCategories, reqAddCategories } from '../../api'
import AddForm from './addForm'
import UpdateForm from './updateForm'

export default class Category extends Component {
  
  state = {
    categories: [], // 一级分类列表
    loading: false, // 是否正在获取数据中
    parentId: '0', // 当前需要显示的分类列表的父分类ID
    parentName: '', // 当前需要显示的分类列表的父分类名称
    subCategories: [], // 二级分类列表
    showStatus: 0 // 标识添加/更新的确认框是否显示, 0: 都不显示, 1: 显示添加, 2: 显示更新
  }

  // 初始化Table所有列的数组
  initColumns = () => {
    this.columns = [
      {
        title: '分类的名称',
        dataIndex: 'name'
      },
      {
        title: '操作',
        width: 300,
        render: (category) => (
          <span>
            <LinkButton onClick={() => this.showUpdate(category)}>修改分类</LinkButton>
            {/*如何向事件回调函数传递参数: 先定义一个匿名函数, 在函数调用处理的函数并传入数据*/}
            
            { this.state.parentId === '0' ?  <LinkButton onClick={() => this.showSubCategories(category)}>查看子分类</LinkButton> : null }
          </span>
        )
      }
    ]
  }

  // 异步获取一级/二级分类列表显示
  getCategories = async (parentId) => {
    // 在发请求前, 显示loading
    this.setState({ loading: true})
    parentId = parentId || this.state.parentId
    const result = await reqCategories(parentId)
    // 在请求完成后, 隐藏loading
    this.setState({ loading: false })

    if (result.status === 0) {
      // 取出分类数组(可能是一级也可能二级的)
      const categories = result.data
      if (parentId === '0') {
        this.setState({
          categories
        })
      }
    } else {
      message.error('获取分类列表失败')
    }
  }

  // 显示指定一级分类对象的二子列表
  showSubCategories = (category) => {
    // 更新状态
    this.setState({
      parentId: category._id,
      parentName: category._name
    }, () => { // 在状态更新且重新render()后执行
      console.log('parentId', this.state.parentId) // '0'
      // 获取二级分类列表显示
      this.getCategories()
    })

    // setState()不能立即获取最新的状态: 因为setState()是异步更新状态的
  }

  // 显示指定一级分类列表
  showCategories = () => {
    // 更新为显示一列表的状态
    this.setState({
      parentId: '0',
      parentName: '',
      subCategories: []
    })
  }

  // 响应点击取消: 隐藏确定框
  handleCancel = () => {
    this.form.resetFields()
    // 隐藏确认框
    this.setState({
      showStatus: 0
    })
  }

  // 显示添加的确认框
  showAdd = () => {
    this.setState({
      showStatus: 1
    })
  }

  // 添加分类
  addCategory = () => {
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 隐藏确认框
        this.setState({
          showStatus: 0
        })

        // 收集数据, 并提交添加分类的请求
        // const { parentId, categoryName } = this.form.getFieldsValue()
        const { parentId, categoryName } = values
        this.form.resetFields()
        const result = await reqAddCategories(parentId, categoryName)
        if (result.status === 0) {
          // 添加的分类就是当前分类列表下的分类
          if (parentId === this.state.parentId) {
            // 重新获取当前分类列表显示
            this.getCategories()
            // 在二级分类列表下添加一级分类, 重新获取一级分类列表, 但不需要显示一级列表
          } else if (parentId === '0') {
            this.getCategories('0')
          }
        }
      }
    })
  }

  // 显示修改的确认框
  showUpdate = (category) => {
    // 保存分类对象
    this.category = category
    this.setState({
      showStatus: 2
    })
  }

  // 更新分类
  updateCategory = () => {
    // 进行表单验证
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 隐藏确定框
        this.setState({
          showStatus: 0
        })

        // 准备数据
        const categoryId = this.category._id
        // const categoryName = this.form.getFieldsValue('categoryName')
        const categoryName = values
        // 清除输入数据
        this.form.resetFields()

        // 发请求更新分类
        const result = await reqUpdateCategories({categoryId, categoryName})
        if (result.status === 0) {
          // 重新显示列表
          this.getCategories()
        }
      }
    })
    
  }

  // 为第一次render()准备数据
  componentWillMount () {
    this.initColumns()
  }

  // 执行异步任务: 发异步ajax请求
  componentDidMount () {
    // 获取一级分类列表显示
    this.getCategories()
  }

  render () {

    // 读取状态数据
    const { categories, loading, parentId, parentName, subCategories, showStatus } = this.state
    // 读取指定的分类
    const category = this.category || {}

    // card 的左侧
    const title = parentId === '0' ? '一级分类列表' : (
      <span>
        <LinkButton onClick={this.showCategories}>一级分类列表</LinkButton>
        <Icon type="arrow-right" style={{ marginRight: 5}}></Icon>
        <span>{parentName}</span>
      </span>
    )
    // card 的右侧
    const extra =(
      <Button type="primary" onClick={this.showAdd}>
        <Icon type="plus"></Icon>
        添加
      </Button>
    )

    return (
      <Card title={title} extra={extra}>
        <Table
          dataSource={parentId === '0' ? categories : subCategories} 
          columns={this.columns} 
          bordered
          rowKey="_id"
          loading={loading}
          pagination={{defaultPageSize: 5, showQuickJumper: true}}></Table>
        
        <Modal
          title="添加分类"
          visible={showStatus === 1}
          onOk={this.addCategory}
          onCancel={this.handleCancel}>
            <AddForm categories={categories} parentId={parentId} setForm={(form) => {this.form = form}}></AddForm>
        </Modal>

        <Modal
          title="更新分类"
          visible={showStatus === 2}
          onOk={ this.updateCategory}
          onCancel={this.handleCancel}>
            <UpdateForm categoryName={category.name}  setForm={(form) => {this.form = form}}></UpdateForm>
        </Modal>
      </Card>
    )
  }
}
